<!DOCTYPE html>
<html>

<head>
    <title>记事本</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width-device-width,initial-scale=1" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- main part -->
    <!-- input box -->
    <header class="header">
        <h1>TodoList</h1>
    </header>
    <h2>property part</h2>
    <div id="app">
        <p>
            raw:{{ msg }}
        </p>
        <p>
            rev:{{ reverse }}
        </p>
        <input type="text" v-model.lazy="person.age">
        <p>{{person.mature}}</p>
        <p>{{person.age}}</p>
    </div>
    <div id="vm">
        <p>{{msg|capitalize}}</p>
    </div>
    <div>
        <h2>emit part</h2>
    </div>
    <div id="vem">
        <child v-on:greet="sayHello">???</child>

    </div>
    <div id="slotvm">
        <greeting>Hello {{msg}}</greeting>
    </div>
    <script src="js/vue-property.js"></script>
    <script src="js/vue-emit.js"></script>
    <script src="js/vue-slot.js"></script>
    <script src="js/vue-async-com.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- <script type="text/javascript" src="index.js"></script> -->
    <div>
        <a href="#" class="goto">
            long text</a>
        <a href="">2</a>
        <a href="">3</a>
    </div>

    <base>
    <template #header>
        <h1>Here might be a page title</h1>
    </template>

    <template #default>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
    </template>

    <template #footer>
        <p>Here's some contact info</p>
    </template>
    </base>

    
</body>

</html>